✅Scrapbox Dialogの見た目を改善する

Scrapbox Dialogの見た目を改善する

after:

https://gyazo.com/84ce13f8e1e4073f3fdffc0da100172c

before

https://gyazo.com/d01f8b60f3dfe9ca5ba2f5154044085c

とりあえず上下にでこぼこしてるのはなんとかしたい

入力欄はinputタグ直接で、ボタンはMaterial-UIなので後者に揃えるのが良さそう

ボタンに背景色をつける

https://gyazo.com/0eb4f93d2ac3c77ff0ed64b878506122

入力欄にこんなにパディングいらない

code:css

.MuiOutlinedInput-input {

padding: 9px;

}

https://gyazo.com/f9a6013f0b6ea724acb2d47ef91b18be

マージンがないせいでラベルがはみ出してるのをなおしたい

code:css

.dialog-inputs > div {

margin-top: 7px;

}

https://gyazo.com/7856c9b750e100efade7fb5c1e37c0e3

iPhone Xサイズだとどうなるか

https://gyazo.com/94bc7583e7c90ae292743e5e80c3dbdb

サイズを調節してみる

https://gyazo.com/84ce13f8e1e4073f3fdffc0da100172c

うーん、個人的にはここが揃って欲しいけどな…

https://gyazo.com/c521e80e41d01b51bdb5a7c4def5a3b2

改善した